<template>
  <div class="goodTypeContainer">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>商品类别管理</span>
      </div>
      <el-table
        :cell-style="{textAlign:'center'}"
        :data="goodTypeData"
        :header-cell-style="{textAlign:'center'}"
        style="width: 100%"
      >
        <el-table-column
          label="分类名称"
          prop="name"
        />
        <el-table-column
          label="上级ID"
          prop="parentId"
        />
        <el-table-column label="操作"  :render-header="renderHeader">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="edit(scope.row)">编辑</el-button>
            <el-button type="danger" size="mini" @click="del(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        style="margin: 20px 0;float: right"
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getGoodType"
      />
    </el-card>
<!--    添加功能对话框-->
    <el-dialog
      title="添加商品类别"
      :visible.sync="addDialogVisible"
      width="30%">
      <el-form ref="form" :model="addGoodForm" label-width="80px">
        <el-form-item label="分类名称">
          <el-input v-model="addGoodForm.name"></el-input>
        </el-form-item>
        <el-form-item label="上级ID">
          <el-input v-model="addGoodForm.parentId"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="addDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="submitAddData">确 定</el-button>
  </span>
    </el-dialog>
<!--    修改商品对话框-->
    <el-dialog
      title="修改商品信息"
      :visible.sync="editDialogVisible"
      width="30%">
      <el-form ref="form" :model="editGoodForm" label-width="80px">
        <el-form-item label="分类名称">
          <el-input v-model="editGoodForm.name"></el-input>
        </el-form-item>
        <el-form-item label="上级ID">
          <el-input v-model="editGoodForm.parentId"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="editDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="submitEditData">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
import { addGoodType, delGoodType, editGoodType, getGoodCate, queryGoodType } from '@/api/goods'

export default {
  name: 'GoodType',
  data(){
    return{
      //修改信息对话框
      editDialogVisible:false,
      //添加商品类别表单数据
      addGoodForm:{},
      //修改商品类别表单数据
      editGoodForm:{},
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      //添加对话框的显示与隐藏
      addDialogVisible:false,
      total:0,
      goodTypeData:[],
      id:""
    }
  },
  created() {
    this.getGoodType()
  },
  methods:{
    renderHeader(h) {
      return(
        <div>操作
          <el-button type="success" size='mini'  onClick={()=>this.handleAddItem()} style="margin-left:20px">添加</el-button>
        </div>
      )
    },
    handleAddItem(){
      this.addDialogVisible=true
    },
    //  获取商品类别信息
    getGoodType(){
      getGoodCate().then(res=>{
        this.goodTypeData=res.data.records
        this.total=res.data.total
      })
    },
  //  添加商品数据方法
    submitAddData(){
      addGoodType({
        name:this.addGoodForm.name,
        parentId:this.addGoodForm.parentId
      }).then(()=>{
        this.getGoodType()
        this.$message.success('添加成功')
        this.addDialogVisible=false
      })
    },
  //  修改商品分类信息
    edit(row){
      //打开编辑商品类别信息对话框
      this.editDialogVisible=true
    //  通过id查询商品类别信息
      const id=row.id
      this.id=id
      queryGoodType(id).then(res=>{
        this.editGoodForm=res.data
      })
    },
  //  提交修改商品类别信息
    submitEditData(){
    //  调用修改商品类别信息接口
      editGoodType({
        id:this.id,
        name:this.editGoodForm.name,
        parentId:this.editGoodForm.parentId
      }).then(()=>{
        this.getGoodType()
        this.$message.success('更新成功')
        this.editDialogVisible=false
      })
    },
  //  删除商品类别ID
    del(row){
      const id=row.id
    this.$confirm('您确定删除这条数据么？',{
      confirmButtonText:"确定",
      cancelButtonText:"取消",
      type:'warning'
    }).then(function(){
      return delGoodType(id)
    }).then(()=>{
      this.getGoodType()
      this.$message.success('删除成功')
    })
    }
  }
}
</script>

<style scoped lang="scss">
.goodTypeContainer{
  padding: 20px;
}
</style>
